<template>
	<view class="invitation-rules-container">
		<view class="invitation-rules-header">
		     邀请好友点餐，你可获得奖励
		</view>
		
		<view class="list-table">
			<uni-table border stripe emptyText="暂无更多数据">
				<!-- 表头行 -->
				<uni-tr>
					<uni-th width="47" align="center" style="font-size: 26rpx;">等级</uni-th>
					<uni-th width="73" align="center">邀请人数</uni-th>
					<uni-th width="47" align="center">首单</uni-th>
					<uni-th width="54" align="center">第2单</uni-th>
					<uni-th width="54" align="center">第3单</uni-th>
					<uni-th width="73" align="center">后续每单</uni-th>
				</uni-tr>
				<!-- 表格数据行 -->
				<uni-tr>
					<uni-td>LV1</uni-td>
					<uni-td>0人</uni-td>
					<uni-td>2元</uni-td>
					<uni-td>3元</uni-td>
					<uni-td>4元</uni-td>
					<uni-td>最高5元</uni-td>
				</uni-tr>
				<uni-tr>
					<uni-td>LV2</uni-td>
					<uni-td>10人</uni-td>
					<uni-td>2元</uni-td>
					<uni-td>3元</uni-td>
					<uni-td>5元</uni-td>
					<uni-td>最高5元</uni-td>
				</uni-tr>
				<uni-tr>
					<uni-td>LV3</uni-td>
					<uni-td>30人</uni-td>
					<uni-td>4元</uni-td>
					<uni-td>3元</uni-td>
					<uni-td>5元</uni-td>
					<uni-td>最高5元</uni-td>
				</uni-tr>
				<uni-tr>
					<uni-td>LV4</uni-td>
					<uni-td>50人</uni-td>
					<uni-td>4元</uni-td>
					<uni-td>5元</uni-td>
					<uni-td>6元</uni-td>
					<uni-td>最高6元</uni-td>
				</uni-tr>
				<uni-tr>
					<uni-td>LV5</uni-td>
					<uni-td>100人</uni-td>
					<uni-td>5元</uni-td>
					<uni-td>6元</uni-td>
					<uni-td>7元</uni-td>
					<uni-td>最高7元</uni-td>
				</uni-tr>
				<uni-tr>
					<uni-td>LV6</uni-td>
					<uni-td>150人</uni-td>
					<uni-td>6元</uni-td>
					<uni-td>7元</uni-td>
					<uni-td>8元</uni-td>
					<uni-td>最高8元</uni-td>
				</uni-tr>
				<uni-tr>
					<uni-td>LV7</uni-td>
					<uni-td>200人</uni-td>
					<uni-td>7元</uni-td>
					<uni-td>8元</uni-td>
					<uni-td>9元</uni-td>
					<uni-td>最高9元</uni-td>
				</uni-tr>
		
			</uni-table>
		</view>

		<view class="invitation-rules-main m-t-20">
			<view class="invitation-rules-title m-t-10 m-b-10">邀请说明</view>
			<view class="invitation-rules-content m-t-10">
				<view class="content-box m-t-10">
					<view class="content-box-text">1.不同等级时邀请的好友，奖励制度不同。</view>
					<view class="content-box-text-assistant m-t-10">比如:你本月邀请了150个好友，你的等级是6级。从第151个好友开始后，每邀请一个，您的奖励前三单分别为:6、7、8元。在第三单之后，会进行随机金额的返现。</view>
				</view>
				<view class="content-box m-t-10">
					<view class="content-box-text">2.等级有效时间为一年，每年更新一次。一年后等级将从LV1重新开始计算。</view>
				</view>
				<view class="content-box m-t-10">
					<view class="content-box-text">3.平台保留活动最终解释权。</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script lang="ts" setup>
	import { reactive, ref, unref } from "vue";
	import { onLoad, onPageScroll, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';
</script>

<style lang="scss" scoped>
	.invitation-rules-container {
		position: relative;
		padding-top: 130rpx;
		padding-bottom: 20rpx;

		.invitation-rules-header {
			top: 0;
			width: calc(100% - 40rpx);
			padding: 50rpx 20rpx 160rpx 20rpx;
			background: linear-gradient(180deg, #FF2A47 0%, rgba(254, 126, 23, 0.07) 100%);
			color: #FFFFFF;
			font-size: 32rpx;
			font-weight: 700;
			position: absolute;
			text-align: center;

			.header-invite {
				width: 100%;
			}
		}
		
		.list-table {
			margin: 0 20rpx 20rpx 20rpx;
			::v-deep .uni-table{
				border-radius: 0;
				
			}
			::v-deep .uni-table-th {
				font-size: 26rpx !important;
				font-weight: 500;
				// border-colr: #FF5046;
				background: #FFC5C2;
				color: #FF5046;
			}
		}

		.personalcenter-card-title {
			font-size: 32rpx;
			font-weight: 600;
			color: #333333;
		}

		.invitation-rules-main {
			background: #FFFFFF;
			z-index: 20;
			border-radius: 12rpx;
			padding: 20rpx;
			margin: 0 20rpx;
			
			.invitation-rules-title{
				width: 100%;
				text-align: center;
				font-size: 32rpx;
				font-weight: 500;
				color: #333333;
			}

			.invitation-rules-content{
				font-size: 26rpx;
				font-weight: 400;
				.content-box-text{
					color: #333333;
				}
				.content-box-text-assistant{
					color: #666666;
					padding-left: 20rpx;
				}
			}
		}

	}
</style>